<template>
  <div class="index">
    欢迎来到后台管理系统
    <div ref="myChart" class="myChart"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { ref } from "vue";
import * as echarts from "echarts";

export default defineComponent({
  setup() {
    const myChart = ref<HTMLElement>();

    const myCharts = ref<any>();
    
    onMounted(() => {
      myEchart();
    });

    const myEchart = () => {
      setTimeout(() => {
        // 绘制图表
        myCharts.value = echarts.init(myChart.value!);
        myCharts.value.setOption({
          tooltip: {},
          xAxis: {
            data: [
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
              "星期日",
            ],
          },
          yAxis: {},
          series: [
            {
              name: "后台管理系统",
              type: "line",
              data: [15, 10, 26, 10, 8, 20, 10],
            },
          ],
        });
      }, 10);
    };

    return { myChart };
  },
});
</script>

<style scoped lang="scss">
.index {
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  .myChart {
    margin-top: 50px;
    width: 700px;
    height: 600px;
    margin: 0 auto;
  }
}
</style>
